﻿
@{
    ViewBag.Title = "时光轴";
}

@section css{
    <link href="~/css/homePage/timeline.css" rel="stylesheet" />
}

<div class="blog-container">
    @*站点导航路径*@
    <div class="layui-elem-quote sitemap layui-breadcrumb shadow" lay-separator=">">
        <a href="/" title="网站首页">网站首页</a>
        <a><cite>点点滴滴</cite></a>
    </div>
    <div class="blog-main">
        <div class="child-nav shadow">
            <span class="child-nav-btn child-nav-btn-this">时光轴</span>
            <span class="child-nav-btn">笔记墙</span>
        </div>
        <div class="timeline-box shadow">
            <div class="timeline-main">
                <h1><i class="fa fa-clock-o"></i>时光轴<span>——— 记录生活点点滴滴</span></h1>
                <div class="timeline-line"></div>
                @*年*@
                <div class="timeline-year">
                    <h2><a class="yearToggle" href="javascript:;">2017年</a><i class="fa fa-caret-down fa-fw"></i></h2>
                    @*月*@
                    <div class="timeline-month">
                        <h3 class="animated fadeInLeft"><a class="monthToggle" href="javascript:;">2月</a><i class="fa fa-caret-down fa-fw"></i></h3>
                        <ul>
                            <li class=" ">
                                <div class="h4 animated fadeInLeft">
                                    <p class="date">02月23日 19:33</p>
                                </div>
                                <p class="dot-circle animated"><i class="fa fa-dot-circle-o"></i></p>
                                <div class="content animated fadeInRight">该时光轴支持手机平板PC，但并不能兼容一些老浏览器！</div>
                                <div class="clear"></div>
                            </li>
                            <li class=" ">
                                <div class="h4 animated fadeInLeft">
                                    <p class="date">02月11日 19:33</p>
                                </div>
                                <p class="dot-circle animated"><i class="fa fa-dot-circle-o"></i></p>
                                <div class="content animated fadeInRight">这是2017年发布的</div>
                                <div class="clear"></div>
                            </li>
                            <li class=" ">
                                <div class="h4 animated fadeInLeft">
                                    <p class="date">02月23日 19:33</p>
                                </div>
                                <p class="dot-circle animated"><i class="fa fa-dot-circle-o"></i></p>
                                <div class="content animated fadeInRight">放假啦数据放垃圾分类数据放啦</div>
                                <div class="clear"></div>
                            </li>
                        </ul>
                    </div>
                </div>

                @*年*@
                <div class="timeline-year">
                    <h2><a class="yearToggle" href="javascript:;">2017年</a><i class="fa fa-caret-down fa-fw"></i></h2>
                    @*月*@
                    <div class="timeline-month">
                        <h3 class="animated fadeInLeft"><a class="monthToggle" href="javascript:;">2月</a><i class="fa fa-caret-down fa-fw"></i></h3>
                        <ul>
                            <li class=" ">
                                <div class="h4 animated fadeInLeft">
                                    <p class="date">02月23日 19:33</p>
                                </div>
                                <p class="dot-circle animated"><i class="fa fa-dot-circle-o"></i></p>
                                <div class="content animated fadeInRight">该时光轴支持手机平板PC，但并不能兼容一些老浏览器！</div>
                                <div class="clear"></div>
                            </li>
                            <li class=" ">
                                <div class="h4 animated fadeInLeft">
                                    <p class="date">02月11日 19:33</p>
                                </div>
                                <p class="dot-circle animated"><i class="fa fa-dot-circle-o"></i></p>
                                <div class="content animated fadeInRight">这是2017年发布的</div>
                                <div class="clear"></div>
                            </li>
                            <li class=" ">
                                <div class="h4 animated fadeInLeft">
                                    <p class="date">02月23日 19:33</p>
                                </div>
                                <p class="dot-circle animated"><i class="fa fa-dot-circle-o"></i></p>
                                <div class="content animated fadeInRight">放假啦数据放垃圾分类数据放啦</div>
                                <div class="clear"></div>
                            </li>
                        </ul>
                    </div>
                </div>

                @*年*@
                <div class="timeline-year">
                    <h2><a class="yearToggle" href="javascript:;">2017年</a><i class="fa fa-caret-down fa-fw"></i></h2>
                    @*月*@
                    <div class="timeline-month">
                        <h3 class="animated fadeInLeft"><a class="monthToggle" href="javascript:;">2月</a><i class="fa fa-caret-down fa-fw"></i></h3>
                        <ul>
                            <li class=" ">
                                <div class="h4 animated fadeInLeft">
                                    <p class="date">02月23日 19:33</p>
                                </div>
                                <p class="dot-circle animated"><i class="fa fa-dot-circle-o"></i></p>
                                <div class="content animated fadeInRight">该时光轴支持手机平板PC，但并不能兼容一些老浏览器！</div>
                                <div class="clear"></div>
                            </li>
                            <li class=" ">
                                <div class="h4 animated fadeInLeft">
                                    <p class="date">02月11日 19:33</p>
                                </div>
                                <p class="dot-circle animated"><i class="fa fa-dot-circle-o"></i></p>
                                <div class="content animated fadeInRight">这是2017年发布的</div>
                                <div class="clear"></div>
                            </li>
                            <li class=" ">
                                <div class="h4 animated fadeInLeft">
                                    <p class="date">02月23日 19:33</p>
                                </div>
                                <p class="dot-circle animated"><i class="fa fa-dot-circle-o"></i></p>
                                <div class="content animated fadeInRight">放假啦数据放垃圾分类数据放啦</div>
                                <div class="clear"></div>
                            </li>
                        </ul>
                    </div>
                </div>

                @*年*@
                <div class="timeline-year">
                    <h2><a class="yearToggle" href="javascript:;">2017年</a><i class="fa fa-caret-down fa-fw"></i></h2>
                    @*月*@
                    <div class="timeline-month">
                        <h3 class="animated fadeInLeft"><a class="monthToggle" href="javascript:;">2月</a><i class="fa fa-caret-down fa-fw"></i></h3>
                        <ul>
                            <li class=" ">
                                <div class="h4 animated fadeInLeft">
                                    <p class="date">02月23日 19:33</p>
                                </div>
                                <p class="dot-circle animated"><i class="fa fa-dot-circle-o"></i></p>
                                <div class="content animated fadeInRight">该时光轴支持手机平板PC，但并不能兼容一些老浏览器！</div>
                                <div class="clear"></div>
                            </li>
                            <li class=" ">
                                <div class="h4 animated fadeInLeft">
                                    <p class="date">02月11日 19:33</p>
                                </div>
                                <p class="dot-circle animated"><i class="fa fa-dot-circle-o"></i></p>
                                <div class="content animated fadeInRight">这是2017年发布的</div>
                                <div class="clear"></div>
                            </li>
                            <li class=" ">
                                <div class="h4 animated fadeInLeft">
                                    <p class="date">02月23日 19:33</p>
                                </div>
                                <p class="dot-circle animated"><i class="fa fa-dot-circle-o"></i></p>
                                <div class="content animated fadeInRight">放假啦数据放垃圾分类数据放啦</div>
                                <div class="clear"></div>
                            </li>
                        </ul>
                    </div>
                </div>

                <h1 style="padding-top:4px;padding-bottom:2px;margin-top:40px;"><i class="fa fa-hourglass-end" style="margin-left:1px;"></i>THE END</h1>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script src="~/js/homePage/timeline.js"></script>
}

